<template>
	<view class="container">
		<TopNav title="我的邀请"></TopNav>
		<view class="header">
			<view class="tag">
				<view class="tag-item" v-for="(item,index) in tagList" :key="index" @click="handleTagChange(item,index)"
					:class="{'tag-active':index === tagCurrent}">
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="m-t10" v-for="item in list" :key="item.id">
				<view class="bg-white radius p-12 flex justify-between m-t10">
					<view class="flex">
						<image src="/static/logo.png" class="round bg-gray width-48 height-48" mode=""></image>
						<view class="flex flex-direction justify-around p-l12">
							<text class="f-w500 f-s16 line-height22">徐先生</text>
							<text class="f-s12 f-w400 line-height18" style="color: #8E8F8E;">2024-12-20 18:40</text>
						</view>
					</view>
					<view class="text-theme m-t4">
						<text class="f-s12 f-w400 line-height17">佣金</text>
						<text class="text-bold f-s16 line-height20">+100</text>
					</view>
				</view>
			</view>
			<view class="padding-tb-xs" v-if="total !== 0">
				<u-loadmore :status="loadmoreStatus" nomoreText="仅显示近半年记录" line @loadmore="handleScrollBottom" />
			</view>
			<Empty :show="total === 0"></Empty>
		</view>
	</view>
</template>

<script>
	import {
		invitationList
	} from '@/api/reward'
	import mixins from "@/mixins"
	import Empty from '@/components/empty/index.vue'
	export default {
		mixins: [mixins],
		data() {
			return {

				list: [],
				queryParams: {
					type: '',
					page: 1,
					limit: 10
				},
				status: 'nomore',
				tagCurrent: 0,
				tagList: [{
					text: "用户",
					value: 0
				}, {
					text: "搭搭",
					value: 1
				}]
			}
		},
		onLoad() {
			this.queryParams.type = this.tagList[0]['value']
			this.getList()
		},
		methods: {
			handleTagChange(select, index) {
				this.tagCurrent = index
				this.queryParams.type = select.value
				this.queryParams.page = 1
				this.getList()
			},
			getList() {
				invitationList(this.queryParams).then(res => {
					let {
						data: {
							list,
							count,
							total
						}
					} = res
					this.total = count || 0
					this.pageTotal = total || 0
					if (this.queryParams.page === this.pageTotal) this.loadmoreStatus = 'nomore'
					if (this.queryParams.page === 1) {
						this.list = list
					} else if (this.queryParams.page < this.pageTotal) {
						this.list = this.list.concat(list)
					}
				})
			},
			handleToPage() {
				this.$tab.navigateTo('wait-detail')
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/css/var.scss';

	.container {
		background-color: inherit;

		.header {
			padding: 20rpx 24rpx;
			position: sticky;
			@include sticky-top;
			z-index: 99;
			background-color: inherit;

			.tag {
				margin: 24rpx 0;
				display: flex;

				.tag-item {
					width: 136rpx;
					height: 64rpx;
					background-color: #FFFFFF;
					border-radius: 32rpx;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 64rpx;
					text-align: center;
					margin-right: 20rpx;
				}

				.tag-active {
					background-color: #202020;
					color: #fff;
				}
			}
		}



		.main {
			padding: 20rpx 24rpx;
		}
	}
</style>